<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/fileinput.min.css" rel="stylesheet" />
<link href="css/fileinput.min.css" rel="stylesheet" />
<script src="js/locales/zh.js"></script>
<script src="js/fileinput.min.js"></script>
<title>学校列表</title>
<style>
#myInput {
	background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
	background-position: 10px 12px; /* 定位搜索按钮 */
	background-repeat: no-repeat; /* 不重复图片*/
	width: 50%;
	font-size: 16px; /* 加大字体 */
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	margin-bottom: 12px;
	display:inline;
}
#header {
	border-bottom:#000 medium dashed;
}
#container {
}
.item {
	border-bottom:#000 thin dotted;
}
</style>
</head>

<body>
<div id="header">
  <input type="text" id="myInput" onkeyup="myFunction()" style="margin-left:20px" placeholder="搜索...">
  <span>
  <input type="button" value="搜索" onclick="query()" class="btn btn-default" style="margin-left:40px"/>
  </span> <span>
  <input type="button" value="添加用户" class="btn btn-default" onclick="addUser()" style="margin-left:40px"/>
  </span> </div>
<div id="container">
  <div class="item">
    <div><span style="margin-left:20px">张一</span> <span>
      <button id="modify" style="margin-left:40px" class="btn btn-default"  data-toggle="collapse" 
    data-target="#info">修改</button>
      </span> <span>
      <button  style="margin-left:40px" class="btn btn-default" >删除 </button>
      </span> 
      </div>
    <div id="info" class="collapse" role="form">
      <form class="form-horizontal" style="width:700px">
        <div class="form-group">
          <label class="control-label col-sm-2" for="name">姓名：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="name" value="张一" />
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="province">工号：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="province" value="XXXX" />
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="city">性别：</label>
          <div class="col-sm-10">
             <div class="col-sm-10">
            <select class="form-control">
            <option  selected="selected">男</option>
            <option>女</option>
            </select>
          </div>
        </div>
          </div>
           <div class="form-group">
          <label class="control-label col-sm-2" for="province">电话号码：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="province" value="XXXX" />
          </div>
        </div>
         <div class="form-group">
          <label class="control-label col-sm-2" for="province">身份证号：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="province" value="XXXXXXXX" />
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="city">角色：</label>
          <div class="col-sm-10">
             <div class="col-sm-10">
            <select class="form-control">
            <option  selected="selected">角色1</option>
            <option>角色2</option>
            </select>
          </div>
        </div>
          </div>
       <div class="form-group">
          <label class="control-label col-sm-2" for="city">健康照：</label>
          <div class="col-sm-10">
            <div class="file-loading">
            <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
        </div>
        <br>
          </div>
        </div>
        <div class="form-group" style="margin:0 auto;display:block; width:100px">
        <button  class="btn btn-default"  id="ok">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>
</body>
<script>
//页面加载函数
$().ready(function()
{
	//获取用户列表并将它显示出来
	$().post("/ulms_project/user/query",function(data)
	{
		var str="";
		$(data).each(function()
		{
			str+='<div class="item">'+
    '<div><span style="margin-left:20px">'+this.name+'</span> <span>'+
      '<button id="modify" user_id='+this.id+'style="margin-left:40px" class="btn btn-default"  data-toggle="collapse" '+
    'data-target="#"'+this.id+'>修改</button>'+
      '</span> <span>'+
      '<button  style="margin-left:40px" class="btn btn-default" >删除 </button>'+
      '</span>'+ 
      '</div>'+
    '<div id="'+this.id+'" class="collapse" role="form">'+
      '<form class="form-horizontal" style="width:700px">'+
        '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="name">姓名：</label>'+
          '<div class="col-sm-10">'+
            '<input type="text" class="form-control" id="name" value="'+this.name+'" />'+
          '</div>'+
        '</div>'+
        '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="province">工号：</label>'
          '<div class="col-sm-10">'+
            '<input type="text" class="form-control" id="province" value="'+this.id+'" />'
          '</div>'+
        '</div>'+
        '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="city">性别：</label>'
          '<div class="col-sm-10">'+
             '<div class="col-sm-10">'+
            '<select class="form-control">'+
            '<option  selected="selected">男</option>'+
            '<option>女</option>'+
            '</select>'+
          '</div>'+
        '</div>'+
          '</div>'+
           '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="province">电话号码：</label>'
          '<div class="col-sm-10">'
            '<input type="text" class="form-control" id="province" value="'+this.phone+'" />'
          '</div>'+
        '</div>'+
         '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="province">身份证号：</label>'+
          '<div class="col-sm-10">'+
            '<input type="text" class="form-control" id="province" value="'+this.identity+'" />'+
          '</div>'+
        '</div>'+
        '<div class="form-group">'
         ' <label class="control-label col-sm-2" for="city">角色：</label>'+
          '<div class="col-sm-10">'+
             '<div class="col-sm-10">'+
            '<select  onfocus="f()" user_id="'+this.id+'" class="form-control">'+
            '<option  selected="selected">'+this.character+'</option>'+
            '</select>'+
          '</div>'+
       ' </div>'+
          '</div>'+
       '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="city">健康照：</label>'+
          '<div class="col-sm-10">'+
            '<div class="file-loading">'+
            '<input id="file-0a" class="file" type="file" multiple data-min-file-count="1">'+
        '</div>'+
       ' <br>'+
          '</div>'+
        '</div>'+
        '<div class="form-group" style="margin:0 auto;display:block; width:100px">'+
        '<button  class="btn btn-default" user_id="'+this.id+'" onclick="ok()">保存</button>'+
        '</div>'+
      '</form>'+
    '</div>'+
  '</div>';
		});
		$("#container").html(str);
	});
});
//搜索函数
function query()
{
	//可以根据姓名，id查找。
	var id=$("#myInput").val();
	$.post("/ulms_project/user/queryById",{id:id},function(data)
	{
		var str='<div class="item">'+
    '<div><span style="margin-left:20px">'+this.name+'</span> <span>'+
      '<button id="modify" user_id='+this.id+'style="margin-left:40px" class="btn btn-default"  data-toggle="collapse" '+
    'data-target="#"'+this.id+'>修改</button>'+
      '</span> <span>'+
      '<button  style="margin-left:40px" onclick="remove()" class="btn btn-default" >删除 </button>'+
      '</span>'+ 
      '</div>'+
    '<div id="'+this.id+'" class="collapse" role="form">'+
      '<form class="form-horizontal" style="width:700px">'+
        '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="name">姓名：</label>'+
          '<div class="col-sm-10">'+
            '<input type="text" class="form-control" id="name_"'+this.id+' value="'+this.name+'" />'+
          '</div>'+
        '</div>'+
        '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="province">工号：</label>'
          '<div class="col-sm-10">'+
            '<input type="text" class="form-control" id="number_"'+this.id+' value="'+this.id+'" />'
          '</div>'+
        '</div>'+
        '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="city">性别：</label>'
          '<div class="col-sm-10">'+
             '<div class="col-sm-10">'+
            '<select id="sex_"'+this.id+' class="form-control">'+
            '<option  selected="selected">男</option>'+
            '<option>女</option>'+
            '</select>'+
          '</div>'+
        '</div>'+
          '</div>'+
           '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="province">电话号码：</label>'
          '<div class="col-sm-10">'
            '<input type="text" class="form-control" id="phone_"'+this.id+' value="'+this.phone+'" />'
          '</div>'+
        '</div>'+
         '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="province">身份证号：</label>'+
          '<div class="col-sm-10">'+
            '<input type="text" class="form-control" id="identity_'+this.id+'" value="'+this.identity+'" />'+
          '</div>'+
        '</div>'+
        '<div class="form-group">'
         ' <label class="control-label col-sm-2" for="city">角色：</label>'+
          '<div class="col-sm-10">'+
             '<div class="col-sm-10">'+
            '<select  onfocus="f()" user_id="'+this.id+'" class="form-control">'+
            '<option  selected="selected">'+this.character+'</option>'+
            '</select>'+
          '</div>'+
       ' </div>'+
          '</div>'+
       '<div class="form-group">'+
          '<label class="control-label col-sm-2" for="city">健康照：</label>'+
          '<div class="col-sm-10">'+
            '<div class="file-loading">'+
            '<input id="file-0a" class="file" type="file" multiple data-min-file-count="1">'+
        '</div>'+
       ' <br>'+
          '</div>'+
        '</div>'+
        '<div class="form-group" style="margin:0 auto;display:block; width:100px">'+
        '<button  class="btn btn-default" user_id="'+this.id+'" onclick="modify()">保存</button>'+
        '</div>'+
      '</form>'+
    '</div>'+
  '</div>';
  	$("#container").html(str);
	});
}
//为角色添聚焦事件
function f()
{
	//查询所有角色并显示出来
	$.post("/ulms_project/character/queryAllCharac",function(data)
	{
		var str="";
		$(data).each(function()
		{
			str+='<option charac_id="'+this.id+'">'+this.name+'</option>';
		});
		$(this).html(str);
	});
}

//添加用户函数
function addUser()
{
	window.open("addUser.html");
}

//修改函数
function modify()
{
	//获取修改后的信息
	var user_id=$(this).user_id;//确定修改的是哪一个用户
	var name=$("#name_"+user_id);
	var number=$("#number_"+user_id);
	var sex=$("#sex_"+user_id).val();
	var phone=$("#phone"+user_id);
	var temp="#character"+user_id;
	var charac_id=$(temp+" option:selected").attr(charac_id);
	$.post("/ulms_project/user/modify",{user_id:user_id,name:name,number:number,sex:sex,phone:phone,charac_id:charac_id},function(data)
	{
		alert("修改成功");
	});
	
}

//删除函数
function remove()
{
	//获取被删除的对象的id
	var  user_id=$(this).attr("user_id");
	$.post("/ulms_project/user/remove",{user_id:user_id},function(data)
	{
		alert("删除数据成功！！");
	});
}

</script>
</html>